import React from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import { loadable } from '../utils/util'
import Protect from './protect'
const Introduce = loadable({
  loader: () => import(/*webpackChunkName:"Introduce" */'../views/introduce'),
  loading: function () { return <h2>正在加载Introduce组件</h2> },
});
const Dashboard = loadable({
  loader: () => import(/*webpackChunkName:"dashboard" */'../views/dashboard'),
  loading: function () { return <h2>正在加载dashboard组件</h2> },
});
const Add = loadable({
  loader: () => import(/*webpackChunkName:"add" */'../views/add'),
  loading: function () { return <h2>正在加载add组件</h2> },
});
const Swiper = loadable({
  loader: () => import(/*webpackChunkName:"swiper" */'../views/swiper'),
  loading: function () { return <h2>正在加载swiper组件</h2> },
});
class MyRoute extends React.Component {
  render() {
    return <div className='content_box'>
      <Switch>
        <Redirect path='/' exact to='/introduce'></Redirect>
        <Protect path='/introduce' component={Introduce}></Protect>
        <Protect path='/dashboard' component={Dashboard}></Protect>
        {/* <Route path='/add' component={Add}></Route> */}
        <Protect path='/add' component={Add} role={["admin", 'super']}></Protect>
        <Protect path='/swiper' component={Swiper} ></Protect>
        <Redirect path='/*' to='/404'></Redirect>
      </Switch>
    </div>;
  }
}
export default MyRoute